<div id="app">{{title}}
  <comp></comp>
</div>


<script src="http://unpkg.com/vue@next"></script>

<script>
  // app实例创建
  // Vue2: new Vue
  // new Vue({
  //   methods: {
  //     onclick(){
  //       this.xxx // this多
  //     }
  //   }
  // })

  // 1. 为什么用函数的方式(类型支持)
  // 函数：vue3，react
  // class: Angular, vue2, decorator

  const app = Vue.createApp({
    // data() {
    //   return {
    //     title: 'hello, vue3'
    //   }
    // },
    setup() {
      // Composition API 的优势
      // 消灭this
      // 声明响应式数据
      // 复用性、可读性、可维护性
      const state = Vue.reactive({
        title: 'vue3, hello!'
      })
      setTimeout(() => {
        state.title = 'new title'
      })


      return state
    },
    render() {
      // vue2
      return h('div', {
        attrs: {
          title: this.title
        }
      }, 'xxx')
      // Vue3
      return Vue.h('div', {
        title: this.title,
        foo: this.title,
        onMyClick(){}
      }, 'xxx')
    }

  })


  // 扩展性：自定义渲染器
  const renderer = Vue.createRenderer({
    querySelector(){},
    createElement(){}
  })
  renderer.createApp({})



  app.component('comp', {
    template: '<h1>YK</h1>'
  })

  app.mount('#app')
</script>